<template>
   <div class="dynamic-container">
     <div class="dynamic-container__left">
       <nav-wrap
         width="106px"
         :list="list"
       ></nav-wrap>
     </div>
     <div class="dynamic-container__center">
       <release-card  @listenReleaseState="restartPagination()"></release-card>
       <social-card  @listenSocialCardState="restartPagination()" v-for="(val,index) in postList" :key="val.postId" :info="val"></social-card>
       <pagination ref="pagination" :paginationState="paginationState" :type="2" key="container5" style="margin:20px auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
     </div>
     <div class="dynamic-container__right">
       <hot-topic-list ></hot-topic-list>

       <card-container style="margin-top:16px;padding-bottom: 10px" title="活跃用户" >
         <user-card    style="padding-bottom: 2px;padding-top: 2px" v-for="(val,index) in userList" :key="val.userId"  :info="val"></user-card>

       </card-container>
     </div>
   </div>
</template>


<script>

  import ReleaseCard from '../../components/pc/releaseCard';
  import SocialCard from '../../components/pc/socialContactCard';
  import CardContainer from '../../components/pc/cardContainer';
  import NavWrap from "../../components/pc/nav/navWrap";
  import Pagination from  '../../components/pc/pagination';
  import config from '../../action/config'
  import UserCard from '../../components/pc/userCard2';
  import HotTopicList from '../../components/pc/hotSearchTopicCard'

  export default {

    data(){
      return{
        list: [
          {
            label: '最新',
            address: '/dynamic',
            type: 'new'
          },
          {
            label: '推荐',
            address: '/dynamic',
            type: 'recommends'
          },

          {
            label: '关注',
            address: '/dynamic',
            type: 'following'
          },

          {
            label: '我的',
            address: '/dynamic',
            type: 'my'
          },

          {
            label: '文字',
            address: '/dynamic',
            type: 'word'
          },

          {
            label: '视频',
            address: '/dynamic',
            type: 'video'
          },

          {
            label: '图片',
            address: '/dynamic',
            type: 'picture'
          }
        ],
        postList:[],
        pages:1,
        paginationState:'complate',
        topicList:[],
        userList:[],
      }
    },
    components:{
      ReleaseCard,SocialCard,CardContainer,NavWrap,Pagination,UserCard,HotTopicList
    },

    created() {
      this.dataGetActiveUser();

      if(!this.$store.state.userProfile.userId){
        this.list=[
          {
            label: '最新',
            address: '/dynamic',
            type: 'new'
          },
          {
            label: '推荐',
            address: '/dynamic',
            type: 'recommends'
          },
          {
            label: '文字',
            address: '/dynamic',
            type: 'word'
          },

          {
            label: '视频',
            address: '/dynamic',
            type: 'video'
          },

          {
            label: '图片',
            address: '/dynamic',
            type: 'picture'
          }
        ]
      }
    },

    watch:{
      $route(){
        this.restartPagination();
      }
    },

    methods:{
      restartPagination(){
        this.postList = [];
        this.pages = 1;

        if(process.browser){
          this.$refs.pagination.setCurrentPage(1)
        }
      },
      dataGetActiveUser(){
        this.$axios.$get(config.api.get.User.active,{
          params:{
            page:1,
            size:12
          }
        }).then((response)=>{
          if(response.code===0){
            this.userList = response.data.dataList;
          }

        })
      },


      dataGetNewDynamic(currentPage){
        this.paginationState = 'loading';

        this.$axios.$get(config.api.get.Post.list,{
          params:{
            page:currentPage,
            size:10
          }
        }).then((response)=>{
          this.paginationState = 'over';
          if(currentPage===1){
            this.postList = response.data.dataList;
            this.pages  = response.data.totalPage;
          }else{
            let list = response.data.dataList;
            for(let i = 0;i<list.length;i++){
              this.postList.push(list[i]);

            }
            this.pages  = response.data.totalPage;
          }

        })
      },
      dataGetRecommendDynamic(currentPage){
        this.paginationState = 'loading';

        this.$axios.$get(config.api.get.Post.recommends,{
          params:{
            page:currentPage,
            size:10
          }
        }).then((response)=>{
          this.paginationState = 'over';
          if(currentPage===1){
            this.postList = response.data.dataList;
            this.pages  = response.data.totalPage;
          }else{
            let list = response.data.dataList;
            for(let i = 0;i<list.length;i++){
              this.postList.push(list[i]);

            }
            this.pages  = response.data.totalPage;
          }

        })
      },
      dataGetFollowDynamic(currentPage){
        this.paginationState = 'loading';

        this.$axios.$get(config.api.get.Post.following,{
          params:{
            page:currentPage,
            size:10
          }
        }).then((response)=>{
          this.paginationState = 'over';
          if(currentPage===1){
            this.postList = response.data.dataList;
            this.pages  = response.data.totalPage;
          }else{
            let list = response.data.dataList;
            for(let i = 0;i<list.length;i++){
              this.postList.push(list[i]);

            }
            this.pages  = response.data.totalPage;
          }

        })
      },
      dataGetMyDynamic(currentPage){
        this.paginationState = 'loading';

        this.$axios.$get(config.api.get.Post.myList,{
          params:{
            page:currentPage,
            size:10
          }
        }).then((response)=>{
          this.paginationState = 'over';
          if(currentPage===1){
            this.postList = response.data.dataList;
            this.pages  = response.data.totalPage;
          }else{
            let list = response.data.dataList;
            for(let i = 0;i<list.length;i++){
              this.postList.push(list[i]);

            }
            this.pages  = response.data.totalPage;
          }

        })
      },
      dataGetWordDynamic(currentPage){
        this.paginationState = 'loading';

        this.$axios.$get(config.api.get.Post.list,{
          params:{
            page:currentPage,
            size:10,
            type:0
          }
        }).then((response)=>{
          this.paginationState = 'over';
          if(currentPage===1){
            this.postList = response.data.dataList;
            this.pages  = response.data.totalPage;
          }else{
            let list = response.data.dataList;
            for(let i = 0;i<list.length;i++){
              this.postList.push(list[i]);

            }
            this.pages  = response.data.totalPage;
          }

        })
      },
      dataGetVideoDynamic(currentPage){
        this.paginationState = 'loading';

        this.$axios.$get(config.api.get.Post.list,{
          params:{
            page:currentPage,
            size:10,
            type:1

          }
        }).then((response)=>{
          this.paginationState = 'over';
          if(currentPage===1){
            this.postList = response.data.dataList;
            this.pages  = response.data.totalPage;
          }else{
            let list = response.data.dataList;
            for(let i = 0;i<list.length;i++){
              this.postList.push(list[i]);

            }
            this.pages  = response.data.totalPage;
          }

        })
      },
      dataGetPictureDynamic(currentPage){
        this.paginationState = 'loading';

        this.$axios.$get(config.api.get.Post.list,{
          params:{
            page:currentPage,
            size:10,
            type:2

          }
        }).then((response)=>{
          this.paginationState = 'over';
          if(currentPage===1){
            this.postList = response.data.dataList;
            this.pages  = response.data.totalPage;
          }else{
            let list = response.data.dataList;
            for(let i = 0;i<list.length;i++){
              this.postList.push(list[i]);

            }
            this.pages  = response.data.totalPage;
          }

        })
      },

      changePage(currentPage){
        //返回页数 请求新的数据
        let type = this.$route.query.type;
        if(type==='new'){
          this.dataGetNewDynamic(currentPage);
        }
        if(type==='recommends'){
          this.dataGetRecommendDynamic(currentPage);
        }
        if(type==='following'){
          this.dataGetFollowDynamic(currentPage);
        }
        if(type==='my'){
          this.dataGetMyDynamic(currentPage);
        }
        if(type==='word'){
          this.dataGetWordDynamic(currentPage);

        }
        if(type==='video'){
          this.dataGetPictureDynamic(currentPage);

        }
        if(type==='picture'){
          this.dataGetVideoDynamic(currentPage);


        }

      }


    },


  }


</script>


<style lang="scss" scoped>

  .dynamic-container{
    width: $pageWidth;
    margin:16*$length auto;
    @extend %flex-row-spb;
    align-items: flex-start;
    position:relative;

    div{
      position:relative;
    }
    .dynamic-container__left{
      width:106*$length;
    }

    .dynamic-container__center{
      width:816*$length;
    }

    .dynamic-container__right{
      width:302*$length;
      .topic-content__c{
        @extend %flex-row-spb;
        @extend %cursorPointer;
        padding:0 16*$length;
        box-sizing: border-box;
        margin-top:20*$length;
        p{
          width:190*$length;
          @include fontStyle(12,16,500,#333,left);
          @extend %nowrap;
          @extend %animate-transition;

          &:hover{
            color:#00AAE6
          }
        }

        h6{
          @include fontStyle(12,16,500,#ccc,left);
          @extend %nowrap;
        }
      }
    }
  }

</style>
